@import "src/styles/mixins";

.index_main{
    display: flex;
    padding: 20px 8vw;
    :nth-child(1){
        flex-grow: 5;
    }
    :nth-child(2){
        flex-grow: 1;
        flex-basis: 100px;
    }
}
.recommend {
    width: 100%;
    min-height: 100px;
    transition: .8s;
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    //grid-template-rows: repeat(auto-fit, 300px);
    grid-gap: 50px;
}

.book {
    width: 200px;
    overflow: hidden;
    background: transparent;
    border: 0;

    &_image {
        width: 100%;
        aspect-ratio: 3/4;
        overflow: hidden;
    }

    &_name {
        @include lineOver;
        margin: 15px 0 4px 0;
        color: #484848;
        cursor: default;
        &:hover{
            color: #626262;
        }
    }

    &_author {
        @include lineOver;
        margin: 0;
        color: #8d8d8d;
    }
}
.image_scale {
    transition: .5s;
}

.image_scale:hover {
    transform: scale(1.2);
}

.history{
    box-sizing: border-box;
    overflow-x: hidden;
    &_card{
        border-radius: 10px;
        margin-top: 80px;
        padding: 20px;
        background: white;
        h4{
            margin-top: 0;
        }
        >p{
            width: 100%;
            @include lineOver;
            > a{
                color: #525252;
            }
            :hover{
                color: #46b9a8;
                text-decoration: underline;
            }
        }
    }
}

